<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta name="description" content="塔猫计时器">
  <meta name="keywords" content="塔猫科技 知乎 科技产品 计时器 效率学习">
  <title>塔猫科技有限公司</title>

  <script type="text/javascript" src="http://libs.baidu.com/jquery/1.7.2/jquery.min.js"></script>
    <script type="text/javascript">
    $(document).ready(function(){
    alert("您好！推荐您关注公众号：塔心理（有在线客服）可以获得最便捷的帮助");
    })
    </script>

  <!-- 在样式表前导入 -->
  <script src="./libs/scrollreveal/scrollreveal.min.js"></script>
  <link rel="shortcut icon" href="favicon.ico" type="image/x-icon">
  <link rel="stylesheet" href="./libs/glide/glide.core.min.css">
  <link rel="stylesheet" href="./libs/glide/glide.theme.min.css">
  <link rel="stylesheet" href="./css/style.css">
</head>
<body>
  <!-- 头部 -->
  <header>
    <!-- logo -->
    <div class="logo">猫猫PDF</div>
    <!-- 导航条 -->
    <nav>
      <a href="#glide">首页</a>
      <a href="#about-us">关于我们</a>
      <a href="#case">产品图册</a>
      <i class="iconfont icon-fangdajing"></i>
    </nav>
    <!-- 汉堡按钮, 屏幕缩放时显示的 -->
    <div class="burger">
      <div class="burgers">
        <div class="burger-line1"></div>
        <div class="burger-line2"></div>
        <div class="burger-line3"></div>
      </div>
    </div>
  </header>

  <!-- 轮播图 -->
  <div class="glide" id="glide">
    <!-- 轮播主体 -->
    <div class="glide__track" data-glide-el="track">
      <ul class="glide__slides">
        <li class="glide__slide">
          <div class="text">
            <h1>猫猫，PDF快速转Word</h1>
            <p>科技改变生活，专注效率办公，您的私人秘籍。</p>
            <button class="text-white go"><a href="https://318t4z7060.imdo.co">免费使用</a></button>
          </div>
          <!-- 覆盖层 -->
          <div class="cover"></div>
          <!-- 背景图片 -->
          <img src="./images/33.jpg" alt="轮播图1">
        </li>
        <li class="glide__slide">
          <div class="text left">
            <h1>猫猫，PDF快速转Word</h1>
            <p>PDF中的表格也可以转换，又快又好。</p>
            <button class="text-lightest go"><a href="https://318t4z7060.imdo.co">探索使用</a></button>
          </div>
          <!-- 覆盖层 -->
          <div class="cover"></div>
          <!-- 背景图片 -->
          <img src="./images/44.jpg" alt="轮播图1">
        </li>
        <li class="glide__slide">
          <div class="text right">
            <h1>行动!</h1>
            <p>挥起你手中的鱼竿，开始使用吧！</p>
            <button class="text-lightest go"><a href="https://318t4z7060.imdo.co">开始使用</a></button>
          </div>
          <!-- 覆盖层 -->
          <div class="cover"></div>
          <!-- 背景图片 -->
          <img src="./images/55.jpg" alt="轮播图1">
        </li>
      </ul>
    </div>

    <!-- 轮播箭头 -->
    <div class="glide__arrows" data-glide-el="controls">
      <button class="glide__arrow glide__arrow--left" data-glide-dir="<"><</button>
      <button class="glide__arrow glide__arrow--right" data-glide-dir=">">></button>
    </div>

    <!-- 小圆点 -->
    <div class="glide__bullets" data-glide-el="controls[nav]">
      <button class="glide__bullet" data-glide-dir="=0"></button>
      <button class="glide__bullet" data-glide-dir="=1"></button>
      <button class="glide__bullet" data-glide-dir="=2"></button>
    </div>
  </div>

  <!-- 因为 glide 设置为 相对定位，他还占据原来的位置 -->
  
  <!-- 关于我们 -->
  <div class="about-us" id="about-us">
    <section>
      <div class="title">
        <h2>关于我们</h2>
        <p> 塔猫设计团队成员，来自世界各地，多年深耕时间管理领域。芬兰恬静的农场生活，让设计师与程序团队从中获取诸多灵感。</p>
      </div>
      <div class="list">
        <div class="item">
          <i class="iconfont icon-tubiaosvg-"></i>
          <div class="right">
            <h3>品牌设计</h3>
            <div class="bottom-text">
              塔猫原创设计，知名设计团队。令人惊叹的超前科技 ，让您的生活游刃有余。
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-tradingvolume"></i>
          <div class="right">
            <h3>时光朋友</h3>
            <div class="bottom-text">
              做时间的朋友，和光同尘。
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-gouwuche1"></i>
          <div class="right">
            <h3>电子商务</h3>
            <div class="bottom-text">
              各大平台均有售
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-wangyesheji"></i>
          <div class="right">
            <h3>人与自然</h3>
            <div class="bottom-text">
              我们专注于人与自然，帮助您在生活中感受到恬静与快乐。
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-weixin"></i>
          <div class="right">
            <h3>微信公众号</h3>
            <div class="bottom-text">
              公众号：塔心理
            </div>
          </div>
        </div>
        <div class="item">
          <i class="iconfont icon-fuwuqi"></i>
          <div class="right">
            <h3>品牌故事</h3>
            <div class="bottom-text">
              创始人在世界游的过程中，遇到了很多美景，但也遭遇到了很多危险。有冰山上一不小心踩空的雪洞、航行船上的大风大浪海风呼啸、森林旁露营隐约的狼叫...
            </div>
          </div>
        </div>
      </div>
    </section>
  </div>

  <!-- 成功案例 -->
  <div class="case" id="case">
    <section>
      <!-- 标题 -->
      <div class="case-title">
        <h2>产品图册</h2>
        <div class="bats">
          <!-- data-filter 为点击按钮时， 要筛选中的关键字 -->
          <button class="bat active" data-filter="*">全部</button>
          <button class="bat" data-filter=".web">猫猫</button>
          <button class="bat" data-filter=".app">PDF转换</button>
          <button class="bat" data-filter=".open">开源</button>
        </div>
      </div>
      <!-- 内容 -->
      <div class="case-grid">
        <div class="case-item web">
          <a href="./page/wzry.html">
            <img src="./images/wzry01.jpg" alt="案例图片">
          </a>
        </div>
        <div class="case-item web">
          <img src="./images/16.jpg" alt="案例图片">
        </div>
        <div class="case-item open">
          <img src="./images/17.jpg" alt="案例图片">
        </div>
        <div class="case-item open web">
          <img src="./images/18.jpg" alt="案例图片">
        </div>
        <div class="case-item web app">
          <img src="./images/19.jpg" alt="案例图片">
        </div>
        <div class="case-item app">
          <img src="./images/20.jpg" alt="案例图片">
        </div>
        <div class="case-item app open">
          <img src="./images/23.jpg" alt="案例图片">
        </div>
        <div class="case-item web app">
          <img src="./images/24.jpg" alt="案例图片">
        </div>
      </div>
    </section>
  </div>

  <!-- 尾款 -->
  <footer class="text-secondary">
    <!-- 顶部友情链接 -->
    <div class="top">
      <div class="footer-left">
        <dl>
          <dt>联系我们</dt>
          <dd>地址：中国山东省济南市CBD开发区</dd>
          <dd>微信：公众号塔心理</dd>
        </dl>
      </div>
      <div class="footer-right">
        <dl>
          <dt>服务概览</dt>
          <dd><a href="#">PPT</a></dd>
          <dd><a href="#">PDF</a></dd>
          <dd><a href="#">Word</a></dd>
          <dd><a href="#">Excel</a></dd>
        </dl>
        <dl>
          <dt>专项项目</dt>
          <dd><a href="#">转换器</a></dd>
          <dd><a href="#">报工软件</a></dd>
          <dd><a href="#">桌面插件</a></dd>
          <dd><a href="#">智慧办公</a></dd>
        </dl>
        <dl>
          <dt>公司动态</dt>
          <dd><a href="#">人员信息</a></dd>
          <dd><a href="#">公司福利</a></dd>
          <dd><a href="#">最近通知</a></dd>
        </dl>
        <dl>
          <dt>帮助与支持</dt>
          <dd><a href="#">帮助中心</a></dd>
          <dd><a href="#">联系客服</a></dd>
          <dd><a href="#">开发资源</a></dd>
        </dl>
      </div>
    </div>
    <!-- 底部版权 -->
    <div class="bottom text-light-gray">
      <p>鲁ICP备号</p>
      <p>@ 2015-2022 塔猫科技 - 有限公司官网 版权所有</p>
    </div>
    <!-- 返回顶部 -->
    <div class="to-top">
      <a href="#glide">
        <i class="iconfont icon-xiayiye- text-white"></i>
      </a>
    </div>
  </footer>

  <script src="./libs/anime/anime.min.js"></script>
  <script src="./libs/glide/glide.min.js"></script>
  <script src="./libs/isotope/isotope.pkgd.min.js"></script>
  <script src="./libs/smooth-scroll/smooth-scroll.polyfills.min.js"></script>
  <script src="./index.js"></script>
</body>
</html>